<!-- 
    `$route`和`$router`变成了两个`hooks`
    编程式路由导航,就是利用其route和router操作
    比如我们routerLink返回的是一个<a>超链接标签,然后通过to来跳转路由目录,并且可以在其中传值,假如我们想要加一个按钮,让按钮也让其拥有一样的效果
        就可以加个按钮,然后给他绑定上一个事件,再在事件中队router.push进行操作,也就是点击这个按钮后,我们执行
        路由跳转....///这就是编程式路由导航

        实际上的案例有,我们点击登录按钮后,去实现跳转网页
        我们的光标移动到某个导航,我们的内容区就去哪?
    
    
 -->
<template>
    <div class="news">
    <ul>
        <!-- 导航区 -->
        <li v-for="i in newList" :key="i.id">
            <button @click="changeNewDetail(i)">跳转</button>
            <RouterLink :to="{

                name: 'liebiao',
                params: {
                    id: i.id
                    , title: i.title,
                    content: i.content
                }

            }">
            {{ i.title }}</RouterLink>
        </li>
    </ul>
    <!-- 内容区 -->
    <div class="news-content">
        <RouterView/>
    </div>
    </div>
</template>
<script lang="ts" setup name="News">
import { ref } from 'vue';
import { RouterLink, RouterView, useRouter } from 'vue-router';

const newList = ref([
    {
        id: "sdsadasd1",
        title: "大清",
        content: "大清天下无敌"
    }
    , {
        id: "sdsadasd2",
        title: "不列颠",
        content: "不列颠统治世界"
    }
    , {
        id: "sdsadasd3",
        title: "德意志",
        content: "德意志帝国"
    }
])

interface news {
    id: string
    title: string
    content: string
}
const router = useRouter()
function changeNewDetail(i: news) {
    router.push({

        name: 'liebiao',
        params: {
            id: i.id
            , title: i.title,
            content: i.content
        }
    })
}
</script>
<style>
/* 新闻 */
.news {
    /* 内边距上下0,左右20px */
    padding: 0 20px;
    display: flex;
    /* 用于设置容器中子元素的水平对齐方 */
    justify-content: space-between;
    height: 100%;
}

.news ul {
    margin-top: 30px;
    /* 于取消列表项前的标记（如圆点、数字等 */
    list-style: none;
    padding-left: 10px;
}

.news li>a {
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    color: #64967E;
    text-shadow: 0 0 1px rgb(0, 84, 0);
}

.news-content {
    width: 70%;
    height: 90%;
    border: 1px solid;
    margin-top: 20px;
    border-radius: 10px;
}
</style>


